<template>
	<view class="news_video">
		<swiper 
		   class="swiper" 
		   :indicator-dots="false" 
		   :autoplay="false" 
		   @change="handleChange"
		   >
			<swiper-item v-for="(item,index) in list" :key="index">
				<j-video :url="item"
				 height="501rpx" width="100vw"></j-video>
			</swiper-item>
		</swiper>

		<view class="count_con">
			<text>{{index}}</text><text>/</text><text>{{list.length}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: ()=>[]
			},
		},
		components: {
          
		},
		data() {
			return {
                index:1
			};
		},
		created() {

		},
		methods: {
			/**
			 * 预览图片
			 */
			previewImage() {

			},
			handleChange(event){
				this.$emit('change',event.detail.current);
				this.index = event.detail.current+1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/commom/styles/icons.css";

	.news_video {
		width: 100%;
		position: relative;
		padding-top: 206rpx;
		padding-bottom: 30rpx;

		.swiper {
			width: 100%;
			height: 479rpx;
			display: flex;

			.myVideoCon {
				width: 100%;
				height: 479rpx;

				.myVideo {
					width: 100%;
					height: 479rpx;
					background: red;

				}
			}

		}

		.count_con {
			position: absolute;
			color: #fff;
			right: 25rpx;
			top: 0;
			font-size: 26rpx;
			font-weight: 400;

			>text {
				&:nth-child(1) {
					color: #EB4D3C;
					font-size: 49rpx;
				}

				&:nth-child(2) {
					margin-left: 5rpx;
					margin-right: 5rpx;
				}
			}
		}
	}
</style>
